Localized jsx namespace #1941
Localized jsx namespace #1941
Conversation
🦋 Changeset is good to goLatest commit: ad1a84d We got this. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| @@ -0,0 +1,9 @@ | |||
| import {} from 'react' | |||
There was a problem hiding this comment.
This file can be included manually by people not wanting to use @jsx pragma. Those types here are slightly worse than the ones provided for @jsx pragma but AFAIK there is no way to override a type alias already defined in a namespace so I can't redefine LibraryManagedAttributes to only allow css prop for components already accepting className prop.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit ad1a84d:
|
Andarist
force-pushed
the
localized-jsx-namespace
branch
from
26bcbaa to
09afe5a
Compare
Andarist
force-pushed
the
localized-jsx-namespace
branch
from
57552aa to
89f8dac
Compare
There was a problem hiding this comment.
This is awesome 😍 Love that we can conditionally add css rather than always
It's probably worth trying this out on some codebases to see how the type checking performance is, I've got a reasonably big one so I can try it out but others trying it would probably be good.
packages/react/types/index.d.ts
Outdated
| declare module 'react' { | ||
| interface Attributes { | ||
| css?: Interpolation<Theme> | ||
| type WithConditionalCssProp<P> = P extends { className?: string } |
There was a problem hiding this comment.
I think this should be:
type WithConditionalCssProp<P> = "className" extends keyof P
? P extends { className?: string }
? P & { css?: Interpolation<Theme> }
: P
: P;So that it doesn't add the css prop for {}
There was a problem hiding this comment.
Eh, I always forget about this surprising, to me, behavior of the {}. Good catch.
Right! I was quite pleasantly surprised by this as well. There is one downside though - errors about
That would be sweet! I will add the appropriate changeset and docs today/tomorrow so we'll should be able to ship new prerelease this week. |
|
@mitchellhamilton I've added a changeset and short docs mentioning how it behaves now. Please take a look. |
|
This is cool, I will upgrade soon and see how perf is going on our project |
* Provide local JSX namespace for `jsx` * Reuse global JSX namespace defined by React to declare our own * Add a .d.ts file that can be included in pragma-less projects * Fixed TSLint errors * Fix false positive dtslint errors * Do not allow css prop on props-less components * add changeset * Add short docs for css prop + TS
fixes #1800 fixes #1257
I've discovered this magic recently and it solves, quite ideally, the problem with our types augmenting global types and thus causing conflicts with other libraries that define types for the
cssprop. 🎉More info can be found here:
TODO: